<template>
  <div class="wrapper">
    <el-row :gutter="20">
      <el-col :span="4" v-for="data in all" style="padding: 10px">
        <div class="grid-cont-right">
          <div class="grid-num">{{data.value}}</div>
          <div>{{data.name}}</div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="4" v-for="data in base" style="padding: 10px">
        <div class="grid-cont-right">
          <div class="grid-num">{{data.value}}</div>
          <div>{{data.name}}</div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="4" v-for="data in wanfang" style="padding: 10px">
        <div class="grid-cont-right">
          <div class="grid-num">{{data.value}}</div>
          <div>{{data.name}}</div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="4" v-for="data in meeting" style="padding: 10px">
        <div class="grid-cont-right">
          <div class="grid-num">{{data.value}}</div>
          <div>{{data.name}}</div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="4" v-for="data in zgcl" style="padding: 10px">
        <div class="grid-cont-right">
          <div class="grid-num">{{data.value}}</div>
          <div>{{data.name}}</div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="4" v-for="data in ywcl" style="padding: 10px">
        <div class="grid-cont-right">
          <div class="grid-num">{{data.value}}</div>
          <div>{{data.name}}</div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="4" v-for="data in project" style="padding: 10px">
        <div class="grid-cont-right">
          <div class="grid-num">{{data.value}}</div>
          <div>{{data.name}}</div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="4" v-for="data in processed" style="padding: 10px">
        <div class="grid-cont-right">
          <div class="grid-num">{{data.value}}</div>
          <div>{{data.name}}</div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="4" v-for="data in enClinical" style="padding: 10px">
        <div class="grid-cont-right">
          <div class="grid-num">{{data.value}}</div>
          <div>{{data.name}}</div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="4" v-for="data in pubmed" style="padding: 10px">
        <div class="grid-cont-right">
          <div class="grid-num">{{data.value}}</div>
          <div>{{data.name}}</div>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="4" v-for="data in name" style="padding: 10px">
        <div class="grid-cont-right">
          <div>完成数 <span class="grid-num">{{data.complete}}</span></div>
          <div>未完数 <span class="grid-num">{{data.uncomplete}}</span></div>
          <div>{{data.name}}</div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        all: [],
        base: [],
        wanfang: [],
        meeting: [],
        zgcl: [],
        ywcl: [],
        project: [],
        processed: [],
        name: [],
        enClinical: [],
        pubmed: [],
      }
    },
    mounted() {
      /*完成数*/
      this.httpGet('/amgenHcp/CountByStatus');
      /*人名*/
      this.httpGet6('/amgenWork/allInfo');
    },
    methods: {
      /*已完成、未完成*/
      httpGet(api) {
        this.$http.httpGet(api).then((response) => {
          // console.log(response)
          this.all = response.data.data.all;
          this.base = response.data.data.base;
          this.wanfang = response.data.data.wanfang;
          this.meeting = response.data.data.meeting;
          this.zgcl = response.data.data.zgcl;
          this.ywcl = response.data.data.ywcl;
          this.project = response.data.data.project;
          this.processed = response.data.data.processed;
          this.all = response.data.data.all;
          this.all = response.data.data.all;
          this.enClinical = response.data.data.enClinical;
          this.pubmed = response.data.data.pubmed;
        }).catch((error) => {
          console.log(error)
        });
      },
      /*人名*/
      httpGet6(api) {
        this.$http.httpGet(api).then((response) => {
          if (response.data.data.length > 0) {
            this.name = response.data.data
          }
        }).catch((error) => {
          console.log(error)
        });
      },
    },
  }
</script>

<style scoped>
  .wrapper {
    padding: 30px 50px;
    background: #fff;
  }

  .grid-cont-right {
    border: 1px solid #ccc;
    border-radius: 10px;
    text-align: center;
    font-size: 13px;
    font-weight: bold;
    padding: 10px 0;
  }

  .grid-num {
    font-size: 25px;
    font-weight: bold;
    color: rgb(45, 140, 240);
  }
</style>
